<template>
  <div>
    <div>
      <el-container>
        <el-header class="LoGo">
          <div class="LoGo_left">
            <div class="LG">
              <img
                src="../../assets/img/Logo.png"
                style="width: 126px; height: 36px"
              />
            </div>
            <div>
              <el-menu
                :default-active="activeIndex"
                mode="horizontal"
                @select="handleSelect"
                :ellipsis="false"
                style="height: 4.375rem"
                router
              >
                <el-menu-item index="/">
                  <el-icon>
                    <img src="../../assets/img/home.png" class="i_icon" />
                  </el-icon>
                  <span style="color: #000 !important">首页</span>
                </el-menu-item>

                <el-menu-item index="/search">
                  <el-icon>
                    <img src="../../assets/img/路径 33@2x.png" class="i_icon" />
                  </el-icon>
                  <span style="color: #000 !important">搜索</span>
                </el-menu-item>
                <el-menu-item index="/staging">
                  <el-icon>
                    <img
                      src="../../assets/img/路径 4087@2x.png"
                      class="i_icon"
                    />
                  </el-icon>
                  <span style="color: #000 !important">工作台</span>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
          <div class="LoGo_right">
            <div>
              <img
                src="../../assets/img/喇叭.png"
                alt=""
                style="width: 1.625rem; height: 1.75rem"
              />
            </div>
            <div>
              <img
                src="../../assets/img/tou.png"
                alt=""
                style="
                  width: 2.25rem;
                  height: 2.25rem;
                  margin: 0 0.625rem 0 2.25rem;
                "
              />
            </div>
            <div class="fs16" style="margin: 0 0.375rem 0 0.625rem">
              初学者YGL
            </div>
            <div>
              <img
                src="../../assets/img/xia.png"
                alt=""
                style="width: 0.75rem; height: 0.5rem"
              />
            </div>
          </div>
        </el-header>
        <div style="border: 1px solid #eee"></div>

        <el-container>
          <el-aside width="150px">
            <el-menu default-active="1" class="el-menu-vertical-demo" router>
              <el-menu-item index="/home1">
                <el-icon>
                  <img src="../../assets/img/首页.png" class="i_icon" />
                </el-icon>

                <span>首页</span>
              </el-menu-item>
              <el-menu-item index="/subscribe">
                <el-icon>
                  <img src="../../assets/img/订阅.png" class="i_icon" />
                </el-icon>
                <span>订阅与收藏</span>
              </el-menu-item>
              <el-menu-item index="/service">
                <el-icon>
                  <img src="../../assets/img/fuwu.png" class="i_icon" />
                </el-icon>
                <span>服务</span>
              </el-menu-item>

              <el-menu-item index="/stagingSetup">
                <el-icon>
                  <img src="../../assets/img/shezhi.png" class="i_icon" />
                </el-icon>
                <span>设置</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import "../../assets/com/com.scss";

const activeIndex = ref("4");

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="scss" scoped>
.el-menu-item:hover {
  background: url(../../assets/img/hover.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
}

.el-header {
  // width: 120rem;
  height: 4.375rem;
  // border-bottom: 1px solid #eeee;
}

.el-main {
  padding: 0 !important;
  margin: 0;
}

.LoGo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;

  .LoGo_left {
    display: flex;
    align-items: center;

    .LG {
      width: 9.375rem;
      height: 4.375rem;
      // background: #818181;
      opacity: 1;
      border-radius: 0px;
      line-height: 4.375rem;
      text-align: center;
      color: #fff;
    }
  }

  .LoGo_right {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
}

.el-menu-vertical-demo {
  background-color: #1c294c;
  height: calc(1080px - 70px);
}

span {
  color: #fff !important;
}
</style>
